<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      li {
        list-style: none;
      }
      #menu {
        position: absolute;

        border: 1px solid red;
      }

      .hide {
        display: none;
      }
      li:hover {
        background-color: rgb(31, 166, 45);
      }

      div:hover {
        background-color: skyblue;
      }

      p:hover {
        background-color: rgb(131, 17, 128);
      }
    </style>
  </head>
  <body>
    <ul id="menu" class="hide">
      <li flag="dz">点赞</li>
      <li flag="sz">收藏</li>
      <li flag="tb">投币</li>
    </ul>
    <script>
      var menuEle = document.getElementById('menu');
      document.addEventListener('contextmenu', function (event) {
        //去掉左键菜单
        event.preventDefault();
        //点击左键，显示
        menuEle.classList.remove('hide');
        //鼠标坐标赋值给ul
        menuEle.style.left = event.clientX + 'px';
        menuEle.style.top = event.clientY + 'px';
        menuEle.onclick = function (event) {
          var nodeName = event.target.localName;
          alert(nodeName);
        };
      });
      document.addEventListener('click', function () {
        menuEle.classList.add('hide');
      });

    </script>
  </body>
</html>
